{extend name="layout:base" /}
{block name="page_style"}
    <link rel="stylesheet" href="{$cdn_root}/static/index/css/data_y_m_d.css?v={$static_version}">
{/block}
{block name="page_content"}
<!--个人中心-->
<section class="user-center">
    <div class="center">
        <div class="else-title">
            个人中心
        </div>
        <!--一直展开的建议放在最后-->
        <ul class="accordion">
            <li>
                <div class="accordion-title">
                    <span class="name">个人信息</span>
                    <div class="do">
                        <span>查看</span>
                        <span>收起</span>
                        <i class="icon icon-shrink"></i>
                    </div>
                </div>
                <div class="accordion-body my-msg">
                    <div class="form-group" data-type="formData">
                        <div class="form-item">
                            <div class="form-left">
                                用户名
                            </div>
                            <div class="form-right">
                                <input type="text" name="name" value="{$user_detail.name}" readonly="readonly"
                                       disabled="disabled">
                            </div>
                        </div>
                        <div class="form-item must" data-name="gender">
                            <div class="form-left">
                                性别
                            </div>
                            <div class="form-right radio">
                                <div class="sel-group">
                                    {volist name="gender_list" id="name"}
                                    <?php if($user_detail['gender']==$key): ?>
                                        <div class="sel-item on">
                                            <div class="sel-bg">
                                                <div class="sel-on"></div>
                                                <input type="radio" name="gender" value="{$key}" data-value="{$key}">
                                            </div>
                                            {$name}
                                        </div>
                                    <?php else: ?>
                                        <div class="sel-item">
                                            <div class="sel-bg">
                                                <div class="sel-on"></div>
                                                <input type="radio" name="gender" value="{$key}" data-value="{$key}">
                                            </div>
                                            {$name}
                                        </div>
                                    <?php endif; ?>

                                    {/volist}
                                </div>
                            </div>
                        </div>
                        <div class="form-item must" data-name="birthday">
                            <div class="form-left">
                                生日
                            </div>
                            <div class="form-right date">
                                <input type="text" class='date_picker' name="birthday" value="{$user_detail.birthday}"readonly>
                                <i class="icon icon-date"></i>
                            </div>
                        </div>
                        <div class="form-item" data-name="email" data-maxLength="50">
                            <div class="form-left">
                                邮箱
                            </div>
                            <div class="form-right email">
                                <input type="text" name="email" value="{$user_detail.email}">
                            </div>
                        </div>
                        <div class="form-item" data-name="college_name">
                            <div class="form-left">
                                学校
                            </div>
                            <div class="form-right">
                                <input type="text" name="college_name" value="{$user_detail.college_name}">
                            </div>
                        </div>
                        <div class="form-item" data-name="pro_title">
                            <div class="form-left">
                                职称
                            </div>
                            <div class="form-right sel">
                                <select name="pro_title">
                                    <option value="">--请选择--</option>
                                    <?php $pros = list_field_pro_title(); ?>
                                    {volist name="pros" id="name"}
                                    <?php if(isset($user_detail['pro_title']) && $user_detail['pro_title']==$key): ?>
                                    <option value="{$key}" selected="selected">{$name}</option>
                                    <?php else: ?>
                                    <option value="{$key}">{$name}</option>
                                    <?php endif; ?>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="controls">
                            <button class="form-group-submit">保存</button>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="accordion-title">
                    <span class="name">我的申报</span>
                    <div class="do">
                        <span>查看</span>
                        <span>收起</span>
                        <i class="icon icon-shrink"></i>
                    </div>
                </div>
                <div class="accordion-body my-declare">
                    <ul>
                        <?php $list = $res->all(); ?>
                        {volist name="$list" id="vo"}
                        <li>
                            <a href="{:url('apply/read', ['id' => $vo['id']])}" class="news-out else">
                                <div class="news-tit">{$vo.title}</div>
                                <div class="news-data">申报时间：{$vo.create_date}</div>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </li>
            <li class="keep-show">
                <div class="accordion-title">
                    <span class="name">账号设置</span>
                    <div class="do">
                        <span>查看</span>
                        <span>收起</span>
                        <i class="icon icon-shrink"></i>
                    </div>
                </div>
                <div class="accordion-body my-account">
                    <button class="modify-password">修改密码</button>
                    <button class="modify-mobile">修改绑定手机号</button>
                </div>
            </li>
        </ul>
    </div>
</section>
{/block}
{block name="page_pop"}
<!--修改手机第一步弹窗-->
<div class="pop changPhoneFirst-pop" data-type="changePassword-pop" data-url="{:url('modify_mobile_step1')}"
     data-name="changePhoneFirstMsg">
    <i class="icon icon-close"></i>
    <div class="title">
        修改手机号
    </div>
    <div class="content">
        <div class="form-item">
            <div class="form-right phone">
                原手机号：<em>{$user_detail.mobile}</em>
            </div>
        </div>
        <div class="form-item must" data-name="code">
            <div class="form-left" style="display: none;">验证码</div>
            <div class="form-right code">
                <input type="text" placeholder="输入验证码" name="code">
                <button data-type='valid_mobile'>获取验证码</button>
            </div>
        </div>
    </div>
    <div class="controls">
        <button class="sure">下一步</button>
    </div>
</div>
<!--修改手机第二步弹窗-->
<div class="pop changPhoneLast-pop" data-type="changePassword-pop" data-url="{:url('modify_mobile_step2')}"
     data-name="changePhoneLastMsg">
    <i class="icon icon-close"></i>
    <div class="title">
        修改手机号
    </div>
    <div class="content">
        <div class="form-item must" data-name="mobile">
            <div class="form-left" style="display: none;">新手机号码</div>
            <div class="form-right">
                <input type="text" placeholder="输入新手机号码" name="mobile">
            </div>
        </div>
        <div class="form-item must" data-name="code">
            <div class="form-left" style="display: none;">验证码</div>
            <div class="form-right code">
                <input type="text" placeholder="输入验证码" name="code">
                <button data-type='change_mobile'>获取验证码</button>
            </div>
        </div>
    </div>
    <div class="controls">
        <button class="sure">提交</button>
    </div>
</div>
<!--修改密码弹窗-->
<div class="pop changePassword-pop" data-type="changePassword-pop" data-url="{:url('modify_password')}"
     data-name="changePasswordPopMsg">
    <i class="icon icon-close"></i>
    <div class="title">
        修改密码
    </div>
    <div class="content">
        <div class="form-item must" data-name="mobile">
            <div class="form-left" style="display: none;">手机号码</div>
            <div class="form-right">
                <input type="text" placeholder="输入手机号码" value="{$user_detail.mobile}" readonly="readonly">
            </div>
        </div>
        <div class="form-item must" data-name="code">
            <div class="form-left" style="display: none;">验证码</div>
            <div class="form-right code">
                <input type="text" placeholder="输入验证码" name="code">
                <button data-type='change_password'>获取验证码</button>
            </div>
        </div>
        <div class="form-item must" data-name="password">
            <div class="form-left" style="display: none;">新密码</div>
            <div class="form-right">
                <input type="password" placeholder="输入新密码" name="password">
            </div>
        </div>
    </div>
    <div class="controls">
        <button class="sure">提交</button>
    </div>
</div>
{/block}
{block name="page_js"}
<script src="{$cdn_root}/static/index/js/data_y_m_d.js?v={$static_version}"></script>
<script type="text/javascript">
    // 三个验证码表单数据
    let changePhoneFirstMsg = {code: ''};
    let changePhoneLastMsg = {mobile: '', code: ''};
    let changePasswordPopMsg = {password: '', code: ''};

    // function codeInterval(second)
    $(document).ready(function () {
        $('.date_picker').date_input();

        $('.modify-mobile').on('click', function () {
            showPop('changPhoneFirst-pop');
            return false;
        });
        //修改密码
        $('.modify-password').on('click', function () {
            showPop('changePassword-pop');
        });

        let formData = {
            gender: '',
            birthday: '',
            email: '',
            pro_title: '',
            college_name: '',
        };
        $('.form-group-submit').on('click', function () {
            let father = $(this).closest('.form-group'), canSend = true;
            father.find('.form-item').each(function () {
                if ($(this).hasClass('must')) {
                    //单选按钮
                    if ($(this).find('.form-right').hasClass('radio')) {
                        if ($(this).find('.sel-item.on')[0] !== undefined) {
                            formData[`${$(this).attr('data-name')}`] = $(this).find('.sel-item.on input').val();
                        }
                        else {
                            $(this).addClass('error');
                            canSend = false;
                            return false;
                        }
                    }
                    //下拉框
                    if ($(this).find('.form-right').hasClass('sel')) {
                        if ($(this).find('select').val() === '') {
                            $(this).addClass('error');
                            canSend = false;
                            return false;
                        }
                        else {
                            formData[`${$(this).attr('data-name')}`] = $(this).find('select').val();
                        }
                    }
                    //邮箱
                    else if ($(this).find('.form-right').hasClass('email')) {
                        if ($(this).find('input').val() === '') {
                            $(this).addClass('error');
                            canSend = false;
                            return false;
                        }
                        else {
                            let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                            if (reg.test($(this).find('input').val())) {
                                formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                            }
                            else {
                                alertMsg('邮箱格式不正确');
                                canSend = false;
                                return false;
                            }
                        }
                    }
                    //手机号
                    else if ($(this).find('.form-right').hasClass('phone')) {
                        if ($(this).find('input').val() === '') {
                            $(this).addClass('error');
                            canSend = false;
                            return false;
                        }
                        else {
                            let reg = /^((13[0-9])|(15[1-3,5-9])|(17[7])|(18[0-9]))\d{8}$/;
                            if (reg.test($(this).find('input').val())) {
                                formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                            }
                            else {
                                alertMsg('手机号格式不正确111111111');
                                canSend = false;
                                return false;
                            }
                        }
                    }
                    //上面添加特殊验证
                    else {
                        //通用检查
                        if ($(this).find('input').val() === '') {
                            $(this).addClass('error');
                            canSend = false;
                            return false;
                        }
                        else {
                            if ($(this).attr('data-minLength') !== undefined) {
                                if ($(this).find('input').val().length < parseInt($(this).attr('data-minLength'))) {
                                    alertMsg(`${$(this).find('.form-left').text()}最短${$(this).attr('data-minLength')}位`);
                                    $(this).addClass('error');
                                    canSend = false;
                                    return false;
                                }
                            }
                            if ($(this).attr('data-maxLength') !== undefined) {
                                if ($(this).find('input').val().length > parseInt($(this).attr('data-maxLength'))) {
                                    alertMsg(`${$(this).find('.form-left').text()}最长${$(this).attr('data-maxLength')}位`);
                                    $(this).addClass('error');
                                    canSend = false;
                                    return false;
                                }
                            }
                            formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                        }
                    }
                }
                //非必填选项
                else {
                    //单选按钮
                    if ($(this).find('.form-right').hasClass('radio')) {
                        if ($(this).find('.sel-item.on')[0] !== undefined) {
                            formData[`${$(this).attr('data-name')}`] = $(this).find('.sel-item.on input').val();
                        }
                    }
                    //下拉框
                    if ($(this).find('.form-right').hasClass('sel')) {
                        if ($(this).find('select').val() !== '') {
                            formData[`${$(this).attr('data-name')}`] = $(this).find('select').val();
                        }
                    }
                    //邮箱
                    else if ($(this).find('.form-right').hasClass('email')) {
                        if ($(this).find('input').val() !== '') {
                            let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                            if (reg.test($(this).find('input').val())) {
                                formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                            }
                            else {
                                alertMsg('邮箱格式不正确');
                                canSend = false;
                                return false;
                            }
                        }
                    }
                    //手机号
                    else if ($(this).find('.form-right').hasClass('phone')) {
                        if ($(this).find('input').val() !== '') {
                            let reg = /^((13[0-9])|(15[1-3,5-9])|(17[7])|(18[0-9]))\d{8}$/;
                            if (reg.test($(this).find('input').val())) {
                                formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                            }
                            else {
                                alertMsg('手机号格式不正确22222222222');
                                canSend = false;
                                return false;
                            }
                        }
                    }
                    //上面添加特殊验证
                    else {
                        if ($(this).find('input').val() !== '') {
                            if ($(this).attr('data-minLength') !== undefined) {
                                if ($(this).find('input').val().length < parseInt($(this).attr('data-minLength'))) {
                                    alertMsg(`${$(this).find('.form-left').text()}最短${$(this).attr('data-minLength')}位`);
                                    $(this).addClass('error');
                                    canSend = false;
                                    return false;
                                }
                            }
                            if ($(this).attr('data-maxLength') !== undefined) {
                                if ($(this).find('input').val().length > parseInt($(this).attr('data-maxLength'))) {
                                    alertMsg(`${$(this).find('.form-left').text()}最长${$(this).attr('data-maxLength')}位`);
                                    $(this).addClass('error');
                                    canSend = false;
                                    return false;
                                }
                            }
                            formData[`${$(this).attr('data-name')}`] = $(this).find('input').val();
                        }
                    }
                }
            });
            //返回true表示全通过，可以发送数据
            if (canSend) {
                $.ajax({
                    url: "{:url('update')}",
                    data: formData,
                    method: 'POST',
                    success: function (data) {
                        if (data.code) {
                            location.href = data["url"];
                        } else {
                            alertMsg(data['msg']);
                        }
                    },
                    error: function (data) {
                        failMsg("系统繁忙，请稍后再试！");
                    }
                });
            }
        });
    });
</script>
{/block}